<template>
	<view class="wrap">
		<view class="content">
			<view class="Info">
				<view class="details" @click="handleList">
					<view class="avatarInfo">
						<image :src="detailsInfo.headPortrait != null ?  detailsInfo.headPortrait  : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'" />
						<view class="nameWrap">
							<view class="name">{{ detailsInfo.nickname}}</view>
							<view class="hot">
								<view style="margin-right: 20rpx; font-size: 10px;">{{ detailsInfo.createTime }}</view>
								<image style="width: 36rpx; height: 36rpx"
									:src="getImgUrl('/img/allImgs/forum/hot.svg')" />
								<view>热度：{{detailsInfo.pageView}}</view>
							</view>
						</view>
					</view>
				</view>
				<view>
					<!-- <view class="title">{{ detailsInfo.title }}</view> -->
					<view @click="copyInfo(detailsInfo.postContent)">
						<rich-text :nodes="detailsInfo.postContent.replace(/\n/g, '<br/>')"></rich-text>
					</view>
					<!-- <view class="forumContent">{{ detailsInfo.postContent }}</view> -->
					<view class="imgInfo">
						<image @click="showImage(item.pricturePath,idx)" v-for="(item,idx) in imgArr" :key="idx" :src="item.pricturePath" mode="aspectFill" />
					</view>
				</view>
				<view class="view">
					<view class="contInfo">
						<image style="width: 40rpx; height: 40rpx" :src="getImgUrl('/img/allImgs/forum/show.svg')" />
						<view class="count">{{detailsInfo.pageView}}</view>
					</view>
					<view class="contInfo">
						<image style="width: 40rpx; height: 40rpx" :src="getImgUrl('/img/allImgs/forum/review.svg')" />
						<view class="count">{{detailsInfo.commentVolume}}</view>
					</view>
					<view class="contInfo" @click="addLike(detailsInfo.id,detailsInfo.numberLikes,detailsInfo.like)">
						<image v-if="detailsInfo.like == 1" style="width: 40rpx; height: 40rpx"
							:src="getImgUrl('/img/allImgs/forum/like1.svg')" />
						<image v-else style="width: 40rpx; height: 40rpx"
							:src="getImgUrl('/img/allImgs/forum/like.svg')" />
						<view class="count">{{ detailsInfo.numberLikes }}</view>
					</view>
				</view>
			</view>
		</view>


		<!-- <view class="reviewWrap">
            <view class="review" v-for="(item,idx) in commoentArr" :key="idx">
                <view class="info">
                    <view class="username">{{ item.postComment.fromName }}：</view>
                    <view class="content">{{ item.postComment.cover }}</view>
                </view>
                <view class="info">
                    <view class="time">{{ item.postComment.time }}</view>
                    <view class="reviewBtn" @click="reviewFun('comment',item.postComment.id, item.postComment.fromName,item.postComment.id )">回复</view>
                    <view class="reviewBtn" v-if="userInfo.id == item.postComment.fromId" @click="delFun(item.postComment.id)">删除</view>
                </view>
                <view class="reviewDetails" v-for="(child,index) in item.postReplyList" :key="index">
                    <view class="info">
                        <view class="username">{{ child.toName }}</view>
                        <view v-if="child.replyType != 'comment'" class="iconfont icon-review" style="font-size: 12px; color: #C0C0C3;"></view>
                        <view v-if="child.replyType != 'comment'"  class="username">{{ child.fromName }}：</view>
                        <view class="content">{{ child.cover }}</view>
                    </view>
                    <view class="info">
                        <view class="time">{{ item.postComment.time }}</view>
                        <view class="reviewBtn" @click="reviewFun('reply',child.id,child.toName,child.id)">回复</view>
                        <view class="reviewBtn" v-if="userInfo.id == child.toId" @click="delFun(child.id)">删除</view>
                    </view>
                </view>
                <view class="line"></view>
            </view>
            <view class="warn" v-if="showMore">暂无更多评论...</view>
        </view> -->

		<view class="reviewWrap">
			<view class="type" @click="changeOrder">
				<view class="iconfont icon-hot" style="color: #FF5D50;"></view>
				<view class="search">{{ order == 1 ? '最热评价': '时间排序' }}</view>
				<view class="iconfont icon-review-arrow" style="color: #222229; font-size: 10px;"></view>
			</view>
			<view class="line"></view>
			<view class="reviewInfoWrap" v-for="(item,idx) in commentArr" :key="idx">
				<view class="userInfoWrap">
					<view class="avator">
						<image
							:src="item.fromAvatar != null ?  item.fromAvatar : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'"
							style="width: 100%; height: 100%; border-radius: 50%;" mode="aspectFill"
							lazy-load="false" @error="" @load="">
						</image>
					</view>
					<view class="userInfo">
						<view class="name">{{ item.fromName }}</view>
						<view class="reviewContent">{{ item.cover }}</view>
						<view class="reviewTime">
							<view class="time">{{ item.commentTime }}</view>
							<view class="reviewBtn"
								@click="reviewFun('comment',item.id, item.fromId, item.id, item.fromName,item.replyNumber, idx )">
								回复</view>
								<view class="reviewBtn" style="margin-left: 30rpx;" v-if="userInfo.id == item.fromId" @click="delFun(item.id,idx,'father')">删除</view>
						</view>
					</view>
				</view>
				<view class="userInfoWrap" style="margin-left: 86rpx;" v-for="(child,index) in item.postReplyList"
					:key="index">
					<view class="avator" style="width: 42rpx;min-width: 42rpx; height: 42rpx;">
						<image
							:src="child.toAvatar != null ?  child.toAvatar : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'"
							style="width: 100%; height: 100%; border-radius: 50%;" mode="aspectFill"
							lazy-load="false" @error="" @load="">
						</image>
					</view>
					<view class="userInfo">
						<view class="name" style="display: flex;">
							<view> {{ child.toName }}</view>
							<view v-if="child.replyType != 'comment'" class="iconfont icon-review"
								style="font-size: 12px; color: #C0C0C3;"></view>
							<view v-if="child.replyType != 'comment'" class="username">{{ child.fromName }}</view>
						</view>
						<view class="reviewContent">{{ child.cover }}</view>
						<view class="reviewTime">
							<view class="time">{{ child.recoveryTime }}</view>
							<view class="reviewBtn"
								@click="reviewFun('reply',child.id, child.toId, child.parentId, child.toName, item.replyNumber, idx)">
								回复</view>
								<view class="reviewBtn" style="margin-left: 30rpx;" v-if="userInfo.id == child.toId" @click="delFun(child.id,index,'child',idx)">删除</view>
						</view>
					</view>
				</view>
				<view class="moreWrap" v-if="item.replyNumber > 0 && item.open"
					@click="moreCommon(item.id,idx,item.replyNumber)">
					<view class="moreLine"></view>
					<view class="more">展开{{ item.replyNumber }}条回复</view>
					<view class="iconfont icon-review-arrow" style="font-size: 10rpx; color: #707070;"></view>
				</view>
			</view>
		</view>

		<!-- <view class="iptSyl" :style="{bottom: inputBottom+'px'}">
			<input class="ipt" :focus="focusState" @blur="blurInfo" @focus="getHeight" placeholder-style="padding-left: 10rpx"
				v-model="review" placeholder="友善评论，文明发言"  />
			<view class="submit" @click="submit">提交</view>
		</view> -->
		<view class="box-2"  :style="{bottom: inputBottom+'px'}">
			<view class="flex_col">
				<view class="flex_grow">
					<input type="text" :focus="focusState"  @focus="getHeight" @blur="blurInfo" class="content" v-model="review" placeholder="友善评论，文明发言" placeholder-style="color:#DDD;" :adjust-position="false" always-embed>
				</view>
				<button class="send" @tap="submit">提交</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserInfo,
		ForumDetailAPI,
		commentDetailsAPI,
		addCommoentAPI,
		reviewCommentAPI,
		delCommentAPI,
		commentChildAPI,
		addLikeAPI
	} from '../../../utils/api'
	import {
		baseURL
	} from '../../../utils/baseUrl';
	import {
		imgBaseUrl
	} from '../../../utils/baseUrl.js'
	export default {
		data() {
			return {
				baseURL,
				order: 1,
				inputBottom:'',
				id: '', // 帖子id
				idx: '',
				parentId: '',
				review: '',
				flag: true,
				focusState: false,
				showMore: false,
				replyType: '',
				reviewId: '',
				fromId: '',
				name: '',
				pageNo: 1,
				replyNumber: 0,
				detailsInfo: {},
				userInfo: {},
				imgArr: [],
				commentArr: []
			}
		},
		async onLoad(option) {
			// const userInfo = uni.getStorageSync('userInfo');
			const res = await getUserInfo();
			this.userInfo = res.result
			this.id = option.id
			this.getDetails(option.id)
			this.commonetDetails(option.id)
		},
		onReachBottom() {
			this.pageNo++;
			this.commonetDetails(this.id);
		},
		methods: {
			getHeight(e){
				console.log("获取焦点",e.detail.height);
				this.inputBottom = e.detail.height
				// let selector = '';
				// selector = `#list-box`;
				// // 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				// let view = uni.createSelectorQuery().in(this).select(selector);
				// view.boundingClientRect((res) => {
				// 	uni.pageScrollTo({
				// 	    scrollTop:9999999,	// -30 为多显示出大半个消息的高度，示意上面还有信息。
				// 	    duration: 0
				// 	});
				// }).exec();
				console.log("inputbtoon",this.inputBottom)
			},
			showImage(currentUrl,idx){
				const imageUrls = this.imgArr.map(item => {
					return item.pricturePath
				})
				console.log(imageUrls,'urls');
				uni.previewImage({
					urls:imageUrls,
					current: currentUrl
				})
			},
			copyInfo(info) {
				uni.showModal({
				content: info,//模板中提示的内容
				confirmText:'复制内容',
				success:(res) => {//点击复制内容的后调函数
					if(res.confirm) {
					let result
					// #ifndef H5
					//uni.setClipboardData方法就是讲内容复制到粘贴板
					uni.setClipboardData({
						data: info,//要被复制的内容
						success:() => {//复制成功的回调函数
							uni.showToast({//提示
								title:'复制成功' 
							})
						}
					});
				// #endif
				
				 // #ifdef H5 
					let textarea = document.createElement("textarea")
					textarea.value = info
					textarea.readOnly = "readOnly"
					document.body.appendChild(textarea)
					textarea.select() // 选中文本内容
					textarea.setSelectionRange(0, info.length) 
					uni.showToast({//提示
						title:'复制成功' 
					})
					result = document.execCommand("copy") 
					textarea.remove()    
				// #endif
			} else {
				console.log('取消')
			}
	    }
	});
},
			// 帖子详情
			async getDetails(id) {
				const type = this.order == '1' ? '热度' : '时间'
				const res = await ForumDetailAPI(id, type);
				this.detailsInfo = res.result.postInformationVo;
				this.currentLike = res.result.postInformationVo.numberLikes
				this.imgArr = res.result.postPictures
			},
			// 帖子点赞
			async addLike(id, numberLikes) {
				try {
					let number = ''
					let like = ''
					if(this.detailsInfo.like == 1){
						like = 0
						number = numberLikes - 1
					}else{
						like = 1
						number = numberLikes + 1 
					}
					let params = {
							id,
							like,
							numberLikes: number
						}
						
						this.detailsInfo.numberLikes = params.numberLikes
						this.detailsInfo.like = params.like
						await addLikeAPI(params);

				} catch (error) {

				}
			},

			// 删除评论
			async delFun(id,idx,type,fatherIdx) {
				console.log({id,idx,type,fatherIdx})
				const res = await delCommentAPI(id)
				if(res.code == 200){
					if(fatherIdx == undefined){
						this.commentArr.splice(idx,1)
					}else{
						this.commentArr[fatherIdx].postReplyList.splice(idx,1)
					}
					uni.showToast({
						icon:'none',
						title:"删除成功"
					})
					this.commentArr = this.commentArr
				}
			},

			// 帖子评论查询
			async commonetDetails(id) {
				const res = await commentDetailsAPI(id, this.pageNo, this.order == 1 ? "最热" : "时间");
				if (res.result.records.length < 10) {
					this.showMore = true
				}

				for (const vls of res.result.records) {
					vls.postReplyList = []
					vls.pageNo = 1
					vls.open = true
				}
				this.commentArr = [...this.commentArr, ...res.result.records]
			},

			async moreCommon(parentId, idx, pageSize) {

				const childRes = await commentChildAPI(this.id, parentId, pageSize)
				this.commentArr[idx].postReplyList = [...this.commentArr[idx].postReplyList, ...childRes.result
					.pageVoIPage.records
				]
				this.commentArr[idx].open = false
			},

			// 新增评论
			async submit() {
				if(this.review == ''){
					uni.showToast({
						icon:'none',
						title:'请输入内容'
					})
					return;
				}
				if(this.flag){
					this.flag = false;
					setTimeout(()=>{
						this.flag = true
					},5000)
					if (this.replyType == '') {
						const params = {
							cover: this.review,
							postInformationId: this.id,
							fromId: this.userInfo.id,
							fromAvatar: this.userInfo.avatar,
							fromName: this.userInfo.realname,
							replyNumber: this.replyNumber,
							commentTime: "1秒前"
						}
						const res = await addCommoentAPI(params);
						if (res.code == 200) {
							this.replyNumber = res.result.replyNumber
							this.commentArr.push(res.result)
							this.commentArr = this.commentArr
						}
					} else {
						const params = {
							postInformationId: this.id,
							postCommentId: this.postCommentId,
							toId: this.userInfo.id,
							cover: this.review,
							fromId: this.fromId,
							parentId: this.parentId,
							replyType: this.replyType,
							fromName: this.name,
							toName: this.userInfo.realname,
							replyNumber: this.replyNumber
						}
						console.log("replyNumber",this.replyNumber)
						const res = await reviewCommentAPI(params);
						console.log("新增res",res)
						if (res.code == 200) {
							
							const common = this.commentArr.find(vls => vls.id == this.parentId)
							this.replyNumber = Number(res.result.replyNumber) + 1
							const childRes = await commentChildAPI(this.id, this.parentId, this.replyNumber)
							common.postReplyList = childRes.result.pageVoIPage.records
							common.replyNumber = this.replyNumber
							this.commentArr[this.idx].open = false
							this.replyType = ''
							this.name = ''
							this.parentId = ''
							this.focusState = false;
					
						}
					
					}
					this.review = ''
				}
				
			},

			blurInfo() {
				this.focusState = false;
				this.inputBottom = 0;
				console.log("失去焦点",this.inputBottom)
			},

			// 评论回复
			async reviewFun(type, postCommentId, fromId, parentId, name, replyNumber, idx) {
				this.focusState = true;
				this.postCommentId = postCommentId;
				this.fromId = fromId;
				this.parentId = parentId;
				this.replyType = type;
				this.name = name;
				// this.reviewId = parentId;
				this.replyNumber = replyNumber
				this.idx = idx

			},
			// 排序
			changeOrder(e) {
				this.pageNo = 1
				this.order = this.order == 1 ? 2 : 1;
				this.commentArr = [];
				this.commonetDetails(this.id)
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			}
		}
	};
</script>
<style lang='less' scoped>
.flex_col{
	display: flex;
}
.box-2{
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #F3F3F3;
		
		/* 兼容iPhoneX */
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
		
		>view{
			padding: 20rpx;
		}
		
		.content{
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
			width: 540rpx;
		}
		
		.send{
			background-color: #FF9839;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;
			
			&:active{
				background-color: #FF9839;
			}
		}
	}
.chatTitleWrap{
		width: 100%;
		background-color: #fff;
		text-align: center;
		position: fixed;
		z-index: 999999;
	}
	.moreWrap {
		display: flex;
		align-items: center;

		.moreLine {
			width: 200rpx;
			height: 2rpx;
			background-color: #F1F2F5;
		}

		.more {
			margin-left: 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #707070;
		}
	}

	.reviewWrap {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 120rpx 30rpx;

		.reviewInfoWrap {
			&:last-child {
				margin-bottom: 120rpx;
			}

			.reviewTime {
				display: flex;

				.time {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #AFAFAF;
					margin-right: 30rpx;
				}

				.reviewBtn {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #707070;
				}
			}

			.userInfoWrap {
				display: flex;

				/* margin-bottom: 120rpx; */
				.avator {
					width: 82rpx;
					min-width: 82rpx;
					height: 82rpx;
					border-radius: 50%;
				}

				.userInfo {
					margin-left: 10rpx;
					margin-bottom: 20rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #888888;
						line-height: 40rpx;
						margin-bottom: 10rpx
					}

					.reviewContent {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #222229;
						line-height: 40rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		.type {
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 16px;

			.search {
				font-size: 18px;
				margin: 0 4rpx;
			}
		}
	}

	.wrap {
		width: 100%;
		background-color: #F1F2F5;
	}

	.iptSyl {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		background: #fff;
		width: 100%;
		height: 140rpx;
		border-top: 1rpx solid #EAEAEA;
		/* 兼容iPhoneX */
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  

		.submit {
			width: 100rpx;
			background-color: #FF9839;
			border-radius: 8rpx;
			text-align: center;
			color: #fff;
			font-size: 14px;
			padding: 8rpx 10rpx;
			margin-left: 20rpx;
		}

		.ipt {
			margin-left: 30rpx;
			width: 540rpx;
			height: 40rpx;
			background-color: #F4F4F4;
			border-radius: 40rpx;
			padding: 12rpx 10rpx;
			color: #7A7B7A;
			font-size: 14px;
		}
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #f5f5f5;
		margin: 30rpx 0;
	}

	.forumContent {
		width: 100%;
		/* overflow: hidden; */
		/* text-overflow: ellipsis; */
		/* display: -webkit-box;
		-webkit-box-orient: vertical; */
		/* -webkit-line-clamp: 2; */
		/* word-break: break-all; */
		color: #838383;
		line-height: 40rpx;
		font-size: 14px;
		margin-top: 10rpx;
	}

	.content {
		padding: 30rpx;
		background-color: #fff;
		font-size: 14px;
		line-height: 40rpx;

		.details {
			display: flex;
			justify-content: space-between;

			.avatarInfo {
				display: flex;

				.nameWrap {
					margin-left: 20rpx;
					width: 400rpx;
					.name {
						font-size: 14px;
						color: #4D4D4D;
					}

					.hot {
						display: flex;
						align-items: center;
						font-size: 11px;
						color: #ADADAD;
					}
				}

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}
			}

		}
	}

	.imgInfo {
		image {
			margin-top: 20rpx;
			width: 196rpx;
			height: 196rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;

			&:nth-child(3n+3) {
				margin-right: 0 !important;
			}
		}
	}

	.title {
		margin-top: 20rpx;
		line-height: 50rpx;
		font-size: 16px;
		color: #4E4E4E;
	}

	.view {
		display: flex;
		justify-content: space-around;

		.contInfo {
			width: 76rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.viewInfo {
				width: 60rpx;
				margin-left: 40rpx;
				color: #909090;
				display: flex;
				align-items: flex-end;
				font-size: 16px;
			}

			.count {
				color: #909090;
				font-size: 12px;
			}
		}

	}
</style>